import React, { useEffect, useRef, useState } from "react";
import { Map, Marker, NavigationControl, InfoWindow, CustomOverlay, Label, } from 'react-bmapgl';
import Scroll from '../../baseUI/scroll'
import BScroll from "better-scroll"
import { LocationMap } from './LocationStyle.js'
import imgSearch from '../../assets/mainIconfont/搜索.png'
import xiaomi from '../../assets/locationIconfont/icon-小米.png'


const Location = (props) => { 
  let [index, setIndex] = useState(1)
  // console.log(BMapGL, '........................');
  let icon1 = new BMapGL.Icon(xiaomi, new BMapGL.Size(20, 20))
  // 使用ref 标记Scroll
  const containerRef = useRef()

  const changeMark = (index) => {
    setIndex(index)
    // console.log(containerRef.current.getBScroll());
    // 从源码中解出scrollTo, 使其跳转
    // console.log(containerRef.current.getBScroll().scrollTo(0, (index -1 ) * -190))
    // sscrollTo 第一个参数x 轴坐标，第二个参数y 轴坐标，第三个参数时间
    containerRef.current.getBScroll().scrollTo(0, (index -1 ) * -190)
  } 
  const changeMark1 = (index) => {
    // 点击下面card 不用scrollTo 滑动某一位置
    setIndex(index)
  } 
  

  return (
   
    <LocationMap>
      <div className="search">
        <div className="search_input">
          <div className="text">南昌<svg t="1642435195045" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4417" width="20" height="20"><path d="M209.656 344.031l298.604 335.938 306.084-335.839-604.688-0.099z" p-id="4418" fill="#2c2c2c"></path></svg></div>
          <div className="input">
            <div className="image">
              <img src={imgSearch} alt="" />
            </div>
            <input type="text" disabled placeholder="搜索小米之家" />
          </div>
        </div>
      </div>
       {/*  生成一个Map 实例 */}
      <Map center={{ lng: 115.832777, lat: 28.724024 }}
        zoom="11"
        enableScrollWheelZoom={true}
        enableDoubleClickZoom={false}
        idTop={true}
      >
        {/* 标注点的坐标 */}
        <Marker position={{ lng: 115.832777, lat: 28.724024 }} />
        {/* <NavigationControl />  切换3D 控件 */}
        <InfoWindow position={{ lng: 115.832777, lat: 28.724024 }} title="我的位置" text="东华理工大学" />
        {/* 自定义地图覆盖物 */}
        <Marker
          position={{ lng: 115.854211, lat: 28.696491 }}
          icon={icon1}
          onClick={changeMark.bind(null, 1)}
        >
        </Marker>
          <Label 
            style={index === 1? {opacity: "1"} : {opacity: "0"}}
            position={{ lng: 115.854211, lat: 28.696491 }}
            text="小米之家(和昌莱蒙都会专卖店) >"
          > 
          </Label>

        <Marker
          position={{ lng: 116.0281, lat: 28.680285 }}
          icon={icon1}
          onClick={changeMark.bind(null, 2)}
        >
        </Marker>
          <Label 
            style={index === 2? {opacity: "1"} : {opacity: "0"}}
            position={{ lng: 116.0281, lat: 28.680285 }}
            text="小米之家(天虹商场奥体店) >"
          > 
          </Label>
          
        <Marker
          position={{ lng: 115.795721, lat: 28.587287 }}
          icon={icon1}
          onClick={changeMark.bind(null,3)}
        >
        </Marker>
          <Label 
            style={index === 3? {opacity: "1"} : {opacity: "0"}}
            position={{ lng: 115.795721, lat: 28.587287 }}
            text="小米之家(南昌融创茂专卖店) >"
          > 
          </Label>

        <Marker
          position={{ lng: 115.87327, lat: 28.696491 }}
          icon={icon1}
          onClick={changeMark.bind(null, 4)}
        >
        </Marker>
          <Label 
            style={index === 4? {opacity: "1"} : {opacity: "0"}}
            position={{ lng: 115.87327, lat: 28.698626 }}
            text="小米授权服务网点(世茂广场店) >"
          > 
          </Label>

        <Marker
          position={{ lng: 115.91306, lat: 28.676883 }}
          icon={icon1}
          onClick={changeMark.bind(null, 5)}
        >
        </Marker>
          <Label 
            style={index === 5? {opacity: "1"} : {opacity: "0"}}
            position={{ lng: 115.91306, lat: 28.676883 }}
            text="小米授权体验店(苏宁八一广场店) >"
          > 
          </Label>

      </Map>

      <div className="container">
        <Scroll bounceTop={false} 
        ref={containerRef}
        onScroll={
          (e) => {
            // console.log(e.y);
          }
        }>
          <div className="box">
            <div className="card" onClick={changeMark1.bind(null, 1)} style={index === 1? {border: '1px solid #ff6600', margin:'-1px'} : {}}>
              <div className="box1">
                <div className="title">小米之家和昌莱蒙都会专卖店</div>
                <div className="label">
                  <div className="label_small">到店自取</div>
                  <div className="label_small">门店闪送</div>
                  <div className="label_small">服务受理</div>
                </div>
                <div className="location">江西省南昌市红谷滩新区会展路888号熙梦里2-102号铺</div>
                <div className="time">工作日 9:30-22:00，休息日 9:30-22:00</div>
                <div className="contact">电话: 123456789</div>
              </div>
              <div className="box2">
                <div className="text1">进店选购</div>
                <div className="text2">987m</div>
              </div>
              
            </div>
            <div className="test"></div>
            <div className="card" onClick={changeMark1.bind(null, 2)} style={index === 2? {border: '1px solid #ff6600', margin:'-1px'} : {}}>
              <div className="box1">
                <div className="title">小米之家天虹商场奥体店</div>
                <div className="label">
                  <div className="label_small">到店自取</div>
                  <div className="label_small">门店闪送</div>
                  <div className="label_small">服务受理</div>
                </div>
                <div className="location">江西省南昌市南昌县紫阳大道988号奥体中心天虹商场L1层1009B铺</div>
                <div className="time">工作日 9:30-22:00，休息日 9:30-22:00</div>
                <div className="contact">电话: 123456789</div>
              </div>
              <div className="box2">
                <div className="text1">进店选购</div>
                <div className="text2">987m</div>
              </div>
              
            </div>
            <div className="test"></div>
            <div className="card" onClick={changeMark1.bind(null, 3)} style={index === 3? {border: '1px solid #ff6600', margin:'-1px'} : {}}>
              <div className="box1">
                <div className="title">小米之家南昌融创茂专卖店</div>
                <div className="label">
                  <div className="label_small">到店自取</div>
                  <div className="label_small">门店闪送</div>
                  <div className="label_small">服务受理</div>
                </div>
                <div className="location">南昌市红谷滩新区南龙蟠街666号融创茂1层1010号</div>
                <div className="time">工作日 9:30-22:00，休息日 9:30-22:00</div>
                <div className="contact">电话: 123456789</div>
              </div>
              <div className="box2">
                <div className="text1">进店选购</div>
                <div className="text2">987m</div>
              </div>
              
            </div>
            <div className="test"></div>
            <div className="card" onClick={changeMark1.bind(null, 4)} style={index === 4? {border: '1px solid #ff6600', margin:'-1px'} : {}}>
              <div className="box1">
                <div className="title">小米授权服务网点世茂广场店</div>
                <div className="label">
                  <div className="label_small">到店自取</div>
                  <div className="label_small">门店闪送</div>
                  <div className="label_small">服务受理</div>
                </div>
                <div className="location">南昌市红谷滩新区世茂广场C15栋写字楼8层818室</div>
                <div className="time">工作日 9:30-22:00，休息日 9:30-22:00</div>
                <div className="contact">电话: 123456789</div>
              </div>
              <div className="box2">
                <div className="text1">进店选购</div>
                <div className="text2">987m</div>
              </div>
              
            </div>
            <div className="test"></div>
            <div className="card" onClick={changeMark1.bind(null, 5)} style={index === 5? {border: '1px solid #ff6600', margin:'-1px'} : {}}>
              <div className="box1">
                <div className="title">小米授权体验店苏宁八一广场店</div>
                <div className="label">
                  <div className="label_small">到店自取</div>
                  <div className="label_small">门店闪送</div>
                  <div className="label_small">服务受理</div>
                </div>
                <div className="location">江西省南昌市西湖区广场南路205号</div>
                <div className="time">工作日 9:30-22:00，休息日 9:30-22:00</div>
                <div className="contact">电话: 123456789</div>
              </div>
              <div className="box2">
                <div className="text1">进店选购</div>
                <div className="text2">987m</div>
              </div>
              
            </div>
            <div className="test"></div>
          </div>
        </Scroll>
      </div>
    </LocationMap>
  )
}

export default Location